<template>
  <!-- 最外层的大盒子 -->
  <div id="bg">
    <div class="my-box">
      <el-form ref="ruleFormRef" :rules="rules" :model="user" status-icon label-width="80px">
        <div style="padding: 30px">
          <a href="/"><img src="~/assets/img/小葵花课堂2.png" width="100%" alt="霖霖学院" /></a>
        </div>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="user.mobile" />
        </el-form-item>
        <el-form-item label="验证码" prop="validCode">
          <div style="display: inline-block" width="60px">
            <el-input v-model="user.validCode"></el-input>
          </div>
          <el-button type="primary" size="small" :disabled="!isPhone" @click="ValidCode">{{ !isSend ? "获取验证码" : time +
            "s后获取" }}</el-button>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="validPassword">
          <el-input v-model="user.validPassword" type="password" show-password
            @keydown.enter="onSubmit(ruleFormRef)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-login-register" @click="onSubmit(ruleFormRef)">注册</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <NuxtLink to="/login">有账号？返回登陆</NuxtLink>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

definePageMeta({
  layout: 'login'
})
const validateIsPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    isPhone.value = false
    return callback(new Error('手机号不能为空'));
  } else if (!(/^1[3,4,5,6,7,8,9][0-9]{9}$/).test(value)) {
    isPhone.value = false
    callback(new Error('手机号不正确'));
  } else {
    isPhone.value = true;
    callback();
  }
}
const validatePassword = (_rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请确认密码'));
  } else if (value !== user.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  mobile: [
    { validator: validateIsPhone, trigger: ['blur', 'change'] },
    { required: true, trigger: 'change', message: '请输入手机号' }
  ],
  password: [
    { required: true, trigger: ['change', 'blur'], message: '请输入密码' }
  ],
  validPassword: [
    { required: true, trigger: 'change', message: '请确认密码' },
    { validator: validatePassword, trigger: 'change' }
  ],
  validCode: [
    { required: true, trigger: 'change', message: '请输入验证码' }
  ]
})
const user = reactive({
  mobile: '',
  validCode: '',
  password: '',
  validPassword: '',
})
const isPhone = ref(false)
const isSend = ref(false)
const time = ref(59)
const router = useRouter()
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      http.post('preschool/user', user).then(() => {
        router.push('/login')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const ValidCode = () => {
  const timer = setInterval(function () {
    time.value -= 1
    if (time.value < 0) {
      isSend.value = false
      isPhone.value = true
      time.value = 59
      clearInterval(timer)
    }
  }, 1000)
  http.get(`preschool/send/${user.mobile}`)
    .then(() => {
      isSend.value = true
      isPhone.value = false
    })
}
</script>

<style scoped>
.my-box {
  width: 400px;
  height: auto;
  margin: auto;
  margin-top: 150px;
  border: solid 1px rgb(117, 114, 114);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 10px 5px #ccc;
  background-color: white;
}

.btn-login-register {
  width: 100%;
}

#bg {
  display: flex;
  height: 100vh;
  background-image: url('~/assets/img/xiongmao.jpg');
  background-size: cover;
}
</style>